<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入 lib 目录下的 bootstrap 样式表 -->
    <link rel="stylesheet" href="./lib/bootstrap-v4.6.0.css">
    <style>
        :root {
            font-size: 15px;
        }

        body {
            padding-top: 15px;
        }
    </style>
</head>

<body>
    <!-- 栅格系统 -->
    <div class="container-fluid">
        <!-- 栅格系统中的一行 -->
        <div class="row">
            <!-- 左侧的表格，占了 8 列 -->
            <div class="col-sm-8">
                <table class="table table-bordered table-striped table-dark table-hover text-center">
                    <thead>
                        <!-- 表头行 -->
                        <tr>
                            <th scope="col">Id</th>
                            <th scope="col">书名</th>
                            <th scope="col">作者</th>
                            <th scope="col">出版社</th>
                            <th scope="col">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 表格中的每一行 -->

                    </tbody>
                </table>
            </div>

            <!-- 右侧的添加区域，占了 4 列 -->
            <div class="col-sm-4">
                <!-- 添加图书的卡片 -->
                <div class="card text-white bg-secondary sticky-top">
                    <div class="card-header">添加新图书</div>
                    <div class="card-body bg-light">
                        <!-- 书名 -->
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">书名</span>
                            </div>
                            <input type="text" class="form-control" placeholder="请输入图书名称" id="bookname">
                        </div>
                        <!-- 作者 -->
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">作者</span>
                            </div>
                            <input type="text" class="form-control" placeholder="请输入作者名字" id="author">
                        </div>
                        <!-- 出版社 -->
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">出版社</span>
                            </div>
                            <input type="text" class="form-control" placeholder="请输入出版社名称" id="publisher">
                        </div>
                        <!-- 添加按钮 -->
                        <button class="btn btn-dark" id="btnAdd">添加</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./lib/jquery-v3.6.0.js"></script>
    <!-- 导入模板引擎 库 -->
    <script src="./lib/art-template-v4.13.2.js"></script>
    <!-- 定义模板结构 -->
    <script type="text/html" id="tmpl">
        {{each data}}
        <tr>
            <th scope="row">{{$value.id}}</th>
            <td>{{$value.bookname}}</td>
            <td>{{$value.author}}</td>
            <td>{{$value.publisher}}</td>
            <td>
                <button type="button" class="btn btn-link btn-sm" data-id="{{$value.id}}">删除</button>
            </td>
        </tr>
        {{/each}}
    </script>

    <script>
        $(function () {
            // 先发起GET请求，获取后台的数据，通过模板引擎渲染到页面
            function initBookList() {
                $.ajax({
                    type: 'GEt',
                    url: 'http://www.liulongbin.top:3006/api/getbooks',
                    success: function (res) {
                        console.log(res);
                        const htmlStr = template('tmpl', res)
                        $('tbody').html(htmlStr)
                    }
                })
            }
            initBookList()

            // 为添加按钮绑定点击事件，当触发事件后，获取输入框的内容，发起ajax请求，将对应的值添加给请求体
            $('#btnAdd').on('click', function () {
                const bookname = $('#bookname').val().trim()
                const author = $('#author').val().trim()
                const publisher = $('#publisher').val().trim()

                // 判断：只要有一个输入框为空的话，则添加 return 结束后面的代码
                if (!bookname || !author || !publisher) {
                    return alert('不能输入为空')
                }




                // 调用ajax请求方法，将获取到的输入框内容添加到对应的请求体中
                // 通过传参 传过去一个对象
                addNewBook({
                    bookname,
                    author,
                    publisher
                })
            })

            // 定义添加图书的方法，添加成功后，重新渲染到页面上
            function addNewBook(obj) {
                $.ajax({
                    type: 'POST',
                    url: 'http://www.liulongbin.top:3006/api/addbook',
                    data: {
                        bookname,
                        author,
                        publisher
                    },
                    success: function (res) {
                        // 判断：如果请求成功 重新渲染页面结构
                        if (res.status === 201) {
                            initBookList()
                            // 清空文本框内容
                            $('input:text').val('')
                        }
                    }
                })
            }

            // 为删除按钮绑定点击事件，当点击删除事件后，通过自定义属性找到对应的请求体中的id，并且发起ajax删除请求
            $('tbody').on('click', '.btn-link', function () {
                const id = $(this).attr('data-id')
                console.log('ok');
                $.ajax({
                    type: 'DELETE',
                    url: 'http://www.liulongbin.top:3006/api/delbook?id=' + id,
                    success: function (res) {
                        if (res.status === 200) {
                            initBookList()
                        }
                    }
                })
            })




        })
    </script>
</body>

</html>